<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head th:include="common/head :: head"></head>
<link rel="stylesheet" href="./css/stype/information.css">

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <!--头部导航-->
  <div th:include="common/header :: head_home"></div>

  <!--侧边栏-->
  <div th:include="common/sidebar :: sidebar_statistics"></div>


  
  <div class="layui-body">
      <!-- 面包屑 -->
    <span class="layui-breadcrumb">
        <a href="./">首页</a>
        <a href="">统计分析</a>
    </span>
    <!-- 内容主体区域 -->
    <div  class="top-hadoop-count">

       
    <div style="padding: 20px; background-color: #F2F2F2;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">员工登陆频率</div>
            <div class="layui-card-body">
                <div id="basic" style="width: 100%;height: 400%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">信息占比</div>
            <div class="layui-card-body">
                <div id="pie" style="width: 100%;height: 400%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">增加信息</div>
            <div class="layui-card-body">
                <div id="axis" style="width: 100%;height: 400%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">签约客户</div>
              <div class="layui-card-body">
                  <div id="radar" style="width: 100%;height: 400%;"></div>
              </div>
            </div>
          </div>
      </div>
    </div> 


      
    </div>
    
  </div>
  

</div>
<div th:include="common/js :: js"></div>
<script src="./js/echarts.min.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("basic"));
  // 指定图表的配置项和数据
  var option = {
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

</script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("pie"));
  // 指定图表的配置项和数据
  var option = {
      // 标题
      title: {
          text: 'ECharts 入门示例',
          left:'center',
      },
      tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
      orient: 'vertical',
      x: 'left',
      data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  },
  series: [
      {
          name:'访问来源',
          type:'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
              normal: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  show: true,
                  textStyle: {
                      fontSize: '30',
                      fontWeight: 'bold'
                  }
              }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1548, name:'搜索引擎'}
          ]
      }
  ]};

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

</script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("axis"));
  // 指定图表的配置项和数据
  var option = {
      // 标题
      title: {
          text: 'ECharts 入门示例',
          left:'left',
      },
      // // 工具箱
      // toolbox: {
      //     show: true,
      //     feature:{
      //         saveAsImage:{
      //             show:true
      //         },
      //         restore:{
      //             show:true
      //         },
      //         dataView:{
      //             show:true
      //         },
      //         dataZoom:{
      //             show:true
      //         },
      //         magicType:{
      //             type:['line','bar']
      //         }

      //     }
      // },
      tooltip:{
          trigger:'axis'
      },
      // 图例
      legend: {
          data: ['销量']
      },
      // x轴
      xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      // 数据
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          markPoint:{
              data:[
                  {type:'max',name:'最大值'},
                  {type:'min',name:'最小值',symbol:'arrow'}
              ]
          },
          markLine:{
              data:[
                  {type: 'average',name:'平均值'}
              ]
          }
      }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

</script>


<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("radar"));
  // 指定图表的配置项和数据
  var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '销售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技术（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研发（Development）', max: 52000},
           { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
  };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>